import React, { useRef, useState } from 'react';
import { Button, Input, Select, Card, Tooltip } from 'antd';
import { MessageOutlined, FileTextOutlined, CopyOutlined, DownloadOutlined, EllipsisOutlined } from '@ant-design/icons';
import styles from './officeai.module.less';
import ChatCom from '../../../components/chat/Chat';
import { ChatRef } from '../../../components/chat/chatType';
import { Message } from '@douyinfe/semi-foundation/lib/es/chat/foundation';

import bannerImg from '@/assets/banner.png';

const prefix = 'officeai';

const modelOptions = [
  { label: 'deepseek', value: 'deepseek' },
  { label: 'chatglm', value: 'chatglm' },
];

const rightMenus = [
  { key: 'assistant', label: '办公助理', desc: '根据流程智能帮写，促进办公效率飞跃', icon: <MessageOutlined /> },
  { key: 'write', label: '写大纲', desc: '智能梳理思路架构，加速文稿创作管理', icon: <FileTextOutlined /> },
  { key: 'draft', label: '拟文件', desc: '基于要素模板训练，公文一键生成', icon: <CopyOutlined /> },
  { key: 'quick', label: '快捷排版', desc: '根据不同文文类型，一键排版', icon: <DownloadOutlined /> },
  { key: 'polish', label: '改写润色', desc: '智能改写文章结构，提升文本表达能力', icon: <EllipsisOutlined /> },
  { key: 'proof', label: '智能校对', desc: '智能检测错别字、用词、语法等问题', icon: <FileTextOutlined /> },
  { key: 'explain', label: '文件解读', desc: '智能解读文件内容，促进政策理解执行', icon: <MessageOutlined /> },
  { key: 'classify', label: '文件分类', desc: '智能分析文件主题，助力公文管理归档', icon: <FileTextOutlined /> },
];

const AiOffices: React.FC = () => {
  const chatRef = useRef<ChatRef>(null);

  const [model, setModel] = useState('deepseek');
  const [input, setInput] = useState('');
  const [history] = useState([
    { id: 1, text: '失败了1个文件', sub: '帮我解读一下这份政策文件' }
  ]);
  const [aiContent] = useState([
    {
      title: '以下是对这份文档的总结：',
      sections: [
        {
          subtitle: '一、推动高成长发展',
          content: [
            '（一）强化优质梯度培育，加强综合能力培育，建设上海市专精特新中小企业梯度培育数字化平台，支持专精特新中小企业"小升规、规上培优、培优上市"。',
            '（二）推进"小升规"，对当年首次升为规上的专精特新企业，给予最高50万元的一次性奖励；对对认定的专精特新企业，给予最高40万元的一次性奖励。',
            '（三）促进"规上培优"，推动企业做大做强，支持专精特新"小巨人"企业做优做强。'
          ]
        },
        {
          subtitle: '二、助力精准化管理',
          content: [
            '（一）强化优质梯度培育，加强综合能力培育，建设上海市专精特新中小企业梯度培育数字化平台，支持专精特新中小企业"小升规、规上培优、培优上市"。',
            '（二）推进"小升规"，对当年首次升为规上的专精特新企业，给予最高50万元的一次性奖励。'
          ]
        }
      ]
    }
  ]);


  const handleBindChatRef = (ref: React.RefObject<ChatRef>) => {
    // 可以在这里做一些额外操作
    console.log('Chat component ref bound');
  };

  // 接收消息更新
  const handleMessage = (message: Message) => {
    console.log('message', message);
  };

  const renderChat = () => {
    return (
      <ChatCom 
        ref={chatRef}
        agentId='1'
        hideChat={true}
        bindRef={handleBindChatRef}
        onMessage={handleMessage}
        className="ai-assistant-chat-component"
      />
    )
  }
  return (
    <div className={styles[`${prefix}-layout`]}> 
      {renderChat()}
      {/* 左侧 聊天/输入区 */}
      <div className={styles[`${prefix}-left`]}> 
        <div className={styles[`${prefix}-logo`]}> 
          <img src={bannerImg} alt="logo" />
          <div className={styles[`${prefix}-logo-title`]}>- 大家都可以自然交流的方式使用 -</div>
        </div>
        <div className={styles[`${prefix}-modelbar`]}> 
          <Select
            value={model}
            options={modelOptions}
            onChange={setModel}
            className={styles[`${prefix}-model-select`]}
            size="small"
            style={{ width: 120 }}
          />
          <span className={styles[`${prefix}-model-desc`]}>渠道管理</span>
        </div>
        <div className={styles[`${prefix}-history`]}> 
          <div className={styles[`${prefix}-history-title`]}>办公助理</div>
          {history.map(h => (
            <div key={h.id} className={styles[`${prefix}-history-item`]}> 
              <div className={styles[`${prefix}-history-main`]}>{h.text}</div>
              <div className={styles[`${prefix}-history-sub`]}>{h.sub}</div>
            </div>
          ))}
        </div>
        <div className={styles[`${prefix}-input-area`]}> 
          <Input.TextArea
            rows={2}
            placeholder="请输入提问"
            value={input}
            onChange={e => setInput(e.target.value)}
            className={styles[`${prefix}-input`]}
          />
          <div className={styles[`${prefix}-input-btns`]}> 
            <Button onClick={() => chatRef.current?.sendMessage('我想按大纲生成一篇公文')} type="primary" size="small">我想按大纲生成一篇公文</Button>
            <Button onClick={() => chatRef.current?.sendMessage('我想按主题生成一篇公文')} type="primary" size="small">我想按主题生成一篇公文</Button>
            <Button onClick={() => chatRef.current?.sendMessage('我想批量行政写润色')} size="small">我想批量行政写润色</Button>
            <Button onClick={() => chatRef.current?.sendMessage('请帮我生成一篇大纲')} size="small">请帮我生成一篇大纲</Button>
          </div>
        </div>
      </div>
      {/* 中间 AI内容区 */}
      <div className={styles[`${prefix}-center`]}> 
        <div className={styles[`${prefix}-ai-header`]}> 
          <span className={styles[`${prefix}-ai-title`]}>以下是对这份文档的总结：</span>
          <div className={styles[`${prefix}-ai-icons`]}> 
            <Tooltip title="复制"><CopyOutlined /></Tooltip>
            <Tooltip title="下载"><DownloadOutlined /></Tooltip>
            <Tooltip title="更多"><EllipsisOutlined /></Tooltip>
          </div>
        </div>
        <div className={styles[`${prefix}-ai-content`]}> 
          {aiContent[0].sections.map((sec, idx) => (
            <div key={idx} className={styles[`${prefix}-ai-section`]}> 
              <div className={styles[`${prefix}-ai-section-title`]}>{sec.subtitle}</div>
              {sec.content.map((line, i) => (
                <div key={i} className={styles[`${prefix}-ai-section-line`]}>{line}</div>
              ))}
            </div>
          ))}
        </div>
      </div>
      {/* 右侧 智能操作区 */}
      <div className={styles[`${prefix}-right`]}> 
        <div className={styles[`${prefix}-right-banner`]}> 
          <img src={bannerImg} alt="智能操作" />
        </div>
        <div className={styles[`${prefix}-right-menu`]}> 
          {rightMenus.map(menu => (
            <Card
              key={menu.key}
              className={styles[`${prefix}-right-menu-card`]}
              bodyStyle={{ padding: 12, display: 'flex', alignItems: 'center' }}
              hoverable
            >
              <div className={styles[`${prefix}-right-menu-icon`]}>{menu.icon}</div>
              <div>
                <div className={styles[`${prefix}-right-menu-title`]}>{menu.label}</div>
                <div className={styles[`${prefix}-right-menu-desc`]}>{menu.desc}</div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
};

export default AiOffices; 